<template>
  <div class="OrderBox">
    <div class="head relative">
      <h1>订单进度</h1>
      <p class="legendBox absolute">
        <span>有计划</span>
        <span>已完成</span>
        <span>延期</span>
      </p>
    </div>
    <div class="OrderBody flex_b relative">
      <div id="orderTree" class="orderTree scrollbar" 
        onscroll="document.getElementById('scheduleBody').scrollTop = this.scrollTop;">
        <el-tree :data="treeData" :props="defaultProps" node-key="id" 
          :expand-on-click-node='false' :default-expanded-keys="allTreeId"></el-tree>
          <div class="cover absolute"></div>
      </div>
      <div class="scheduleBox">
        <div class="scheduleHead">
          <p>
            <span v-for="(item, index) in date.week" :key="index">{{item.month}}</span>
          </p>
          <p class="flex">
            <span v-for="(items, indexs) in date.week" :key="indexs">
              <i v-for="(item, index) in items.day" :key="index">{{item}}</i>
            </span>
          </p>
        </div>
        <div id="scheduleBody" class="scheduleBody scrollbar" 
          onscroll="document.getElementById('orderTree').scrollTop = this.scrollTop;">
          <ul>
            <li class="flex" v-for="item in listData" :key="item.id">
              <p class="flex_cen">
                <span v-for="(span, i) in item.data1" :key="i"
                  :class="span.state > 0 ? span.state > 1 ? span.state > 2 ? span.state == 3 ? 'exceed' : '' : 'finish' : 'plan' : ''">
                  <i v-if="span.state > 1">{{span.val}}/{{item.all}}</i>
                  <i v-if="span.state <= 1"></i>
                </span>
              </p>
              <p class="flex_cen">
                <span v-for="(span, i) in item.data2" :key="i"
                :class="span.state > 0 ? span.state > 1 ? span.state > 2 ? span.state == 3 ? 'exceed' : '' : 'finish' : 'plan' : ''"></span>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs';

  export default {
    name: 'OrderSchedule',
    props: {

    },

    data () {
      return {
        timeOut: '',                    //计时器
        treeData: [                     //树状图数据
          {
            id: 1,
            label: '一级 1',
            children: [
              {
                id: 2,
                label: '二级 1-1',
                children: [
                  { 
                    id: 31, 
                    label: '三级 1-1-1',
                    children: [
                      { 
                        id: 32, 
                        label: '三级 1-1-1',
                        children: [
                          { id: 33, label: '三级 1-1-1' },
                          { id: 34, label: '三级 1-1-1' },
                          { id: 35, label: '三级 1-1-1' },
                          { id: 36, label: '三级 1-1-1' },
                          { id: 37, label: '三级 1-1-1' },
                          { id: 38, label: '三级 1-1-1' },
                          { id: 39, label: '三级 1-1-1' },
                        ]
                      },
                    ]
                  },
                ]
              }
            ]
          },
          {
            id: 4,
            label: '一级 2',
            children: [
              {
                id: 5,
                label: '二级 2-1',
                children: [ { id: 6, label: '三级 2-1-1' } ]
              },
              {
                id: 7,
                label: '二级 2-2',
                children: [ {id: 8, label: '三级 2-2-1' }]
              }
            ]
          }
        ],
        defaultProps: {                 //树状图配置
          children: 'children',
          label: 'label'
        },
        allTreeId:[],                   //默认打开
        date: {                         //时间数据
          nowYear: '',
          nowMonth: '',
          nowDay: '',
          nowDayOfWeek: '',
          week: [],
        },
        listData: [                     //0无计划，1有计划，2已完成，3延期
          {
            id: 1,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 2,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 3, val: '100'},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 3,
            all: 100,
            data: [{state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 4,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 3, val: '100'},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 5,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 6,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 3, val: '100'},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 7,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 8,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 3, val: '100'},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 9,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 10,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 3, val: '100'},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 11,
            all: 100,
            data: [{state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 12,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 3, val: '100'},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
                    {
            id: 13,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 14,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 3, val: '100'},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 15,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 1, val: ''},{state: 1, val: ''},
                  {state: 1, val: ''},{state: 1, val: ''},{state: 1, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
          {
            id: 16,
            all: 100,
            data: [{state: 2, val: 50},{state: 2, val: 100},{state: 3, val: '100'},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},
                  {state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''},{state: 0, val: ''}]
          },
        ]
      }
    },

    created () {
      let that = this;
      that.loadDate();
      that.loadTree();
      that.loadOrder();

      that.timeOut = setInterval(function(){
        that.loadDate();
        that.loadTree();
        that.loadOrder();
      },60*60*1000);

      that.treeData.map(item1 => {                    //接口确定后删除
        that.allTreeId.push(item1.id);
        if(item1.children) {
          item1.children.map(item2 => {
            that.allTreeId.push(item2.id);
            if(item2.children){
              item2.children.map(item3 => {
                that.allTreeId.push(item3.id);
                if(item3.children){
                  item3.children.map(item4 => {
                    that.allTreeId.push(item4.id);
                  })
                }
              })
            }
          })
        }

      });

      that.listData.map(items => {                    //接口确定后删除
        items['data1'] = [];
        items['data2'] = [];
        items.data.map((item, index) =>{
          if(index < 7) {
            items.data1.push(item)
          }else{
            items.data2.push(item)
          }
        })
      })
    },

    destroyed () {
      clearInterval(this.timeOut)
    },
    
    methods: {
      //格式化日期
      formatDate(n, m, j) {
        let that = this;
        let week = { month: '', day: [] };
        let myDay1 = new Date(that.date.nowYear, that.date.nowMonth, that.date.nowDay + (n - that.date.nowDayOfWeek)).getDate();
        let myDay2 = new Date(that.date.nowYear, that.date.nowMonth, that.date.nowDay + (m - that.date.nowDayOfWeek)).getDate();
        let myMonth1 = new Date(that.date.nowYear, that.date.nowMonth, that.date.nowDay + (n - that.date.nowDayOfWeek)).getMonth();
        let myMonth2 = new Date(that.date.nowYear, that.date.nowMonth, that.date.nowDay + (m - that.date.nowDayOfWeek)).getMonth();
        if(j == 1) {
          for(let i = myDay1; i < myDay2; i++) {
            if(i < 10){
              i = "0" + i;
            }
            week.day.push(i)
          }
        }else{
          if(myDay1 < 10){
              myDay1 = "0" + myDay1;
          }
          if(myDay2 < 10){
              myDay2 = "0" + myDay2;
          }
          week.day.push(myDay1 + '-' + myDay2)
        }

        if(myMonth1 == myMonth2) {
          if(myMonth1 < 10){
            myMonth1 = "0" + myMonth1; 
          }
          week.month = myMonth1 + '月';
        }else{
          if(myMonth1 < 10){
            myMonth1 = "0" + myMonth1; 
          }
          if(myMonth2 < 10){
            myMonth2 = "0" + myMonth2;
          }
          week.month = myMonth1 + '月/' + myMonth2 + '月';
        }
        that.date.week.push(week)
      },

      //日历数据
      loadDate (){
        let now = new Date();
        let that = this;
        that.date.nowDayOfWeek = now.getDay();
        that.date.nowDay = now.getDate();
        that.date.nowMonth = now.getMonth() + 1;
        that.date.nowYear = now.getYear();
        that.date.nowYear += (that.date.nowYear < 2000) ? 1900 : 0;
        that.formatDate(0, 7, 1);
        that.formatDate(7, 13 ,0);
        that.formatDate(14, 20, 0);
        that.formatDate(21, 27, 0);
      },

      //获取树状图数据
      loadTree () {
        let that = this;
        axios.post(this.host+'')
        .then(res=>{                                    //接口确定后解开
          // console.log(res.data);
          // that.treeData = res.data;
          // that.treeData.map(item1 => {
          //   that.allTreeId.push(item1.id);
          //   if(item1.children) {
          //     item1.children.map(item2 => {
          //       that.allTreeId.push(item2.id);
          //       if(item2.children){
          //         item2.children.map(item3 => {
          //           that.allTreeId.push(item3.id);
          //           if(item3.children){
          //             item3.children.map(item4 => {
          //               that.allTreeId.push(item4.id);
          //             })
          //           }
          //         })
          //       }
          //     })
          //   }
          // });
        })
        .catch(error=>{
          console.log(error);
        });
      },

      //获取订单进度数据
      loadOrder () {
        let that = this;
        axios.post(this.host+'')
        .then(res=>{
          // console.log(res.data);                     //接口确定后解开
          // that.listData = res.data;
          // that.listData.map(items => {
          //   items['data1'] = [];
          //   items['data2'] = [];
          //   items.data.map((item, index) =>{
          //     if(index < 7) {
          //       items.data1.push(item)
          //     }else{
          //       items.data2.push(item)
          //     }
          //   })
          // })
        })
        .catch(error=>{
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>
  .OrderBox{
    height: calc(100% - 10px);
  }
  .head{
    text-align: center;
    color: #fff;
  }
  .head h1{
    margin: 10px 0;
  }
  .legendBox{
    right: 0;
    top: 0;
    margin: 0
  }
  .legendBox span{
    font-size: 13px;
  }
  .legendBox span::before{
    content: '';
    width: 12px;
    height: 12px;
    margin: 0 6px 0 10px;
    display: inline-block;
    position: relative;
    top: 2px;
    border-radius: 6px;
  }
  .legendBox span:first-child::before{
    background-color: #b9c49e;
  }
  .legendBox span:nth-child(2)::before{
    background-color: #448aca;
  }
  .legendBox span:nth-child(3)::before{
    background-color: #e60012;
  }
  .OrderBody{
    height: calc(100% - 40px);
    overflow: hidden;
  }
  .orderTree{
    width: 25%;
    height: 100%;
    overflow: auto;
  }
  .cover{
    width: 10%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .scheduleBox{
    width: 74%
  }
  .scheduleBox .scheduleHead p{
    margin: 0;
  }
  .scheduleBox .scheduleHead p span{
    width: 15%;
    height: 25px;
    display: inline-block;
    line-height: 25px;
    text-align: center;
    color: #7d7d7d;
    font-size: 14px;
    border-right: 2px solid #242a35;
    box-sizing: border-box;
    background-color: #1e222b;
  }
  .scheduleBox .scheduleHead p span:last-child{
    border: none;
  }
  .scheduleBox .scheduleHead p:first-child span:first-child{
    width: 55%;
    background-color: #242a35;
  }
  .scheduleBox .scheduleBox p span:first-child{
    width: 55%;
    background-color: #242935;
  }
  .scheduleBox .scheduleHead p:last-child span{
    color: #fff;
    background-color: #2d3b4a;
    display: flex;
  }
  .scheduleBox .scheduleHead p:last-child span:first-child{
    width: 55%;
    background-color: #364b5b;
  }
  .scheduleBox .scheduleHead span i{
    width: 100%;
    display: inline-block;
  }
  .scheduleBox .scheduleHead span:first-child i{
    border-right: 1px solid #242a35;
    box-sizing: border-box;
  }
  .scheduleBox .scheduleHead span:first-child i:last-child{
    border: none;
  }
  .scheduleBody{
    height: calc(100% - 50px);
    overflow: auto;
  }
  .scheduleBody li p:first-child{
    width: 55%;
  }
  .scheduleBody li p:last-child{
    width: 45%;
  }
  .scheduleBody ul, .scheduleBody p{
    margin: 0;
    padding: 0;
  }
  .scheduleBody p{
    height: 38px;
    background-color: #171d2c;
    border-top: 1px solid #19263c;
    box-sizing: border-box;
  }
  .scheduleBody p span{
    display: inline-block;
    width: 100%;
    height: 16px;
    font-size: 12px;
    text-align: center;
  }
  .scheduleBody p span.plan{
    background-color: #b9c49e;
  }
  .scheduleBody p span.finish{
    background-color: #448aca;
  }
  .scheduleBody p span.exceed{
    background-color: #e60012;
  }
</style>